<template>
  <div class="login-page">
    <img class="login-page-top" src="@/assets/bg/top.svg" alt="" />
    <img class="login-page-bottom" src="@/assets/bg/bottom.svg" alt="" />
    <van-nav-bar title="登录" />
    <div class="login-page-content">
      <div class="login-page-content-text">
        <div class="login-page-content-text-1">登录</div>
        <div class="login-page-content-text-2">欢迎使用易联智能！</div>
      </div>
      <div class="login-page-content-login">
        <van-form class="login-page-content-login-form" @submit="onLogin">
          <van-field
            v-model="username"
            name="username"
            label="邮箱/用户名"
            placeholder="邮箱/用户名"
            :error-message="usererror"
            :rules="[{ required: true, message: '请填写邮箱或用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :error-message="passwderror"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        
        <van-button
          style="margin-top: 20px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)"
          round
          block
          type="info"
          native-type="submit"
          >登录</van-button
        >
        </van-form>
        <div style="margin-top:20px;text-align:center">
          <a
            class="login-page-content-bottom-forgetpassword"
            @click="onForgetPasswdClick"
            >忘记密码?</a
          >
        </div>
      </div>
      <div class="login-page-content-bottom">
        <a class="login-page-content-bottom-register" @click="onToRegisterClick"
          >没有账户？<span class="login-page-content-bottom-forgetpassword"
            >注册新用户</span
          ></a
        >
      </div>
    </div>
  </div>
</template>

<script>
// import md5 from '@js/md5.min.js';
// import axios from'';
import { Toast } from "vant";
export default {
  name: "login",
  components: {},
  data: function () {
    return {
      // 用户名
      username: "",
      // 密码
      password: "",
      // md5 加密的密码
      result: "",
      passwderror: "",
      usererror: "",
    };
  },
  created: function () {
    this.username = this.$route.params.username
    this.password = this.$route.params.passwd
  },
  methods: {
    // 后退事件
    onBackClick: function () {
      this.$router.go(-1);
    },
    // 登录按钮点击事件
    onLogin() {
      Toast.loading("登录中...");
      this.onLoginClick();
    },
    onLoginClick: function () {
      this.result = this.$md5(this.password);
      this.$http
        .get("http://121.5.58.100:8000/queryUserByPhone", {
          params: {
            username: this.username,
          },
        })
        .then((res) => {
          Toast.clear();
          console.log(res.data);
          if (res.code === 400) {
            Toast.fail("登陆失败");
          } else if (res.data === "") {
            this.usererror = "用户名不存在";
            Toast.fail("登陆失败");
          } else {
            if (res.data.passwd === this.result) {
              localStorage.setItem("setUserID", res.data.id);
              localStorage.setItem("setPhone", res.data.phonenum);
              localStorage.setItem("islogin", 1);
              Toast.success("登陆成功");
              this.$router.push({
                name: "Main",
                params: {
                  routerType: "login",
                },
              });
            } else {
              this.passwderror = "密码错误";
              Toast.fail("登陆失败");
            }
          }
        })
        .catch(function (error) {
          alert(error.response.data.msg);
          console.log(error.response.data);
          console.log(error.response.status);
        });
      // 判断当前的项目是运行在 Android 设备还是 IOS 设备中
      if (window.androidJSBridge) {
        // window 下存在 android 注入的对象（androidJSBridge），则表示当前项目在 android 设备中运行
        this.onLoginToAndroid();
      } else if (window.webkit) {
        // window 下存在 webkit ，表示当前项目在 IOS 设备中运行
        this.onLoginToIOS();
      }
    },
    /**
     * 忘记密码点击事件
     */
    onForgetPasswdClick: function () {
      this.$router.push({
        name: "resetpasswd",
        params: {
          routerType: "push",
        },
      });
    },
    /**
     * 立即注册点击事件
     */
    onToRegisterClick: function () {
      this.$router.push({
        name: "register",
        params: {
          routerType: "push",
        },
      });
    },
    test: function () {
      this.axios
        .post("http://39.99.153.97:8081/package/packages", {
          phone: "18155348770",
        })
        .then((res) => {
          console.log(res);
          console.log(res.records);
          // console.log(JSON.stringify(res.records))
          this.$store.commit("aaddShoppingData", res.data.records);
        })
        .catch(function (error) {
          console.log(error.response.data);
          console.log(error.response.status);
          console.log(error.response.headers);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@css/style.scss";

.login-page {
  // 页面组件过渡动画，脱离标准文档流
  position: absolute;
  height: 100%;
  width: 100%;
  min-width: 300px;
  min-height: 580px;
  background-color: white;
  &-top {
    position: absolute;
    right: 0;
    top: 46px;
  }
  &-bottom {
    position: absolute;
    left: 0;
    bottom: 0;
  }
  &-content {
    width: 100%;
    height: 100%;
    &-text {
      margin-top: 10vh;
      //font-family: PingFangSC-Regular;
      &-1 {
        font-size: 72px;
        color: #f7f7fb;
        letter-spacing: 0;
      }
      &-2 {
        //position: absolute;
        //bottom: 0;
        margin-left: 40px;
        float: left;
        font-size: 24px;
        color: #1d1e2c;
        letter-spacing: 0;
        transform: translateY(-48px);
      }
    }
    &-login {
      margin: 40px;
      &-form {
        padding: 0;
      }
      &-button {
        margin-top: 20px;
      }
    }
    &-bottom {
      position: fixed;
      bottom: calc(-100px + 15vh);
      width: -webkit-fill-available;
      padding: 40px;
      display: flex;
      flex-direction: column;
      text-align: center;
      &-forgetpassword {
        //font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #6266f9;
        letter-spacing: 0;
        text-align: center;
      }
      &-register {
        //font-family: PingFangSC-Regular;
        font-size: 14px;
        color: black;
        letter-spacing: 0;
        text-align: center;
      }
    }
  }
}
.van-cell {
  margin: 0 0 10px 0;
  width: auto;
  border-radius: 10px;
  background: #f7f7fb;
}
</style>

